<template>
	<view class="change">
		<view class="d-flex a-center" style="padding:60rpx 0 0 60rpx">
			<text><text class="label">*</text>旧密码</text>
			<view class="d-flex a-center border-btn" style="margin-left:116rpx;width:416rpx;height: 72rpx;line-height: 72rpx;">
				<input style="margin-left:31rpx;font-size:24rpx" v-model="user.oldPassword" type="text" placeholder="请输入旧密码">
			</view>
		</view>
		
		<view class="d-flex a-center" style="padding:60rpx 0 0 60rpx">
			<text><text class="label">*</text>新密码</text>
			<view class="d-flex a-center border-btn" style="margin-left:116rpx;width:416rpx;height: 72rpx;line-height: 72rpx;">
				<input style="margin-left:31rpx;font-size:24rpx" v-model="user.newPassword" type="text" placeholder="请输入新密码">
			</view>
		</view>
		
		<view class="d-flex a-center" style="padding:60rpx 0 0 60rpx">
			<text><text class="label">*</text>请确认新密码</text>
			<view class="d-flex a-center border-btn" style="margin-left:32rpx;width:416rpx;height: 72rpx;line-height: 72rpx;">
				<input style="margin-left:31rpx;font-size:24rpx" v-model="user.confirmPassword" type="text" placeholder="请确认新密码">
			</view>
		</view>
		
		<view class="change-butom d-flex a-center j-center text-white" @click="setPassword">
			提交
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				user:{
					oldPassword:'',
					newPassword:'',
					confirmPassword:''
				},
				noClick:true,//防止多次点击按钮
			}
		},
		computed:{
			...mapState({
				userInfo:state=>state.user.userInfo
			})
		},
		methods: {
			setPassword(){
				// 表单校验
				let loginRules = [
					{name: 'oldPassword', type: 'required', errmsg: '旧密码不能为空'},
					{name: 'newPassword', type: 'required', errmsg: '新密码不能为空'},
					{name: 'newPassword', type: 'eq', eqName: 'confirmPassword', required: true, errmsg: '两次密码不一致'},
				]
				let valLoginRes = this.$validate.validate(this.user, loginRules)
				if (!valLoginRes.isOk) {
					uni.showToast({
						icon: 'none',
						title: valLoginRes.errmsg
					})
					return false
				}
				if(!this.noClick) return
				this.noClick = false
				let userId = this.userInfo.id.toString();
				let oldPassword= this.user.oldPassword;
				let newPasswrod= this.user.newPassword
				
				this.$api.setpassword({
					userId,
					oldPassword,
					newPasswrod
				},false).then(res=>{
					if(res.code===200&&res.success == true){
						uni.showToast({
							title:'修改成功',
							icon:'success',
							success() {
								setTimeout(()=>{
									uni.navigateBack({
										delta:1
									})
								},500)
							}
						})
					}else{
						this.noClick = true
					} 
				})
			}
		}
	}
</script>

<style lang="scss">
	.change{
		position: relative;
		.border-btn{
			background: #FFFFFF;
			border: 2rpx solid #F5F5F5;
			border-radius: 20rpx;
		}
		text{
			font-size: 28rpx;
		}
		.change-butom{
			width: 640rpx;
			height: 98rpx;
			background: #F2973C;
			border-radius: 49rpx;
			position: fixed;
			left:55rpx;
			right:55rpx;
			bottom: 100rpx;
		}
		.label{
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 300;
			color: #D35454;
		}
	}
</style>
